<template>
    <div>
        <div class="demo-image">
            <div v-for="(item) in list" :key="item.id" class="block">
                <el-image style="width: 200px; height: 200px" :src="item.img" :fit="cover" />
                <span class="hidden demonstration" :title="item.name">{{ item.name }}</span>
                <el-row>
                    <el-col :span="8" class="demonstration">${{ item.price }}</el-col>
                    <el-col :span="4" class="demonstration" @click="routeClick(item.id)"><el-icon><View /></el-icon></el-col>
                    <el-col :span="4" class="demonstration" @click="cartAdd(item.id)"><el-icon><ShoppingTrolley /></el-icon></el-col>
                    <el-col :span="4" class="demonstration"><el-icon><GoodsFilled /></el-icon></el-col>
                    <el-col :span="4" class="demonstration"></el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
// import MyHome from '../MyHome.vue';
// import router from '@/router';
// import MyLeft from '../components/NavLeft.vue'
import { useGoodsStore } from '@/store/goods';
import { View,ShoppingTrolley,GoodsFilled } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
export default {
    props:['list'],
    components:{
        View,
        ShoppingTrolley,
        GoodsFilled,
        
    },
    data() {
        return {
            data:[],
            store:useGoodsStore(),
        }
    },
    methods:{
        routeClick(val){
            this.data=this.list.find(v=>v.id == val)
            this.$router.push({path:'/detail',query:this.data})//携带数据跳转
        //    console.log(this.data);
        },
        cartAdd(val){
            ElMessageBox.alert('加上了，买去吧', '小提示', {
            confirmButtonText: '得嘞',
            })
                    
            this.data=this.list.find(v=>v.id == val)
            this.store.cartAdd({
                id:this.data.id,
                name:this.data.name,
                price:this.data.price,
                onlineprice:this.data.onlineprice,
                num:1,
                total:this.data.onlineprice

            })//调用状态管理中的添加购物车的方法
        }
    }
}
</script>


<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.hidden{
    margin: 0 auto;
    width: 100px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>